<template>
     <m-card :title='title' :icon1='icon1' icon2='shenglvehao' >
             <div class="nav jc-between">
                 <!--判断是否为当前下标 点击谁的i就等于谁--> 
                    <div class="nav-item " @click="$refs.list.swiper.slideTo(i)" :class="{active:active==i}" v-for="(category,i) of categories" :key="i">
                        <div class="nav-link">{{category.name}}</div>
                    </div>
                </div>
                <!-- 滑动 -->
               <div class="pt-3">
                   <!-- 滑动给上面的导航栏赋值 -->
                    <swiper ref="list" @slide-change="()=>active=$refs.list.swiper.realIndex" :options='{autoHeight:true}'>
                        <swiper-slide v-for="(category, i) of categories" :key="i">
                            <slot name='items' :category='category'></slot>
                        </swiper-slide>
                    </swiper>
               </div>
       </m-card>
</template>
<script>
export default {
    props:{
        title:{type:String,required:true},
        icon1:{type:String,required:true},
        categories:{type:Array,required:true}
    },
    data(){
        return{
            // 触发当前选中
            active:0
        }
    }
}
</script>

<style scoped lang='scss'>
@import '../assets/scss/_variables.scss';
.card{
    .card-header{
        border-bottom: 1px solid $border-color;
    }
    border-bottom: 1px solid $border-color;
}
</style>